layui.use(['table', 'form', 'laydate'], function () {
    let table = layui.table;
    let form = layui.form;
    let url = 'http://localhost:8080';
    // 创建渲染实例
    table.render({
        elem: '#table'
        , url: url + '/back/product/all' // 此处为静态模拟数据，实际使用时需换成真实接口
        , where: {loginName: sessionStorage.getItem("username")}
        , height: 'full-200' // 最大高度减去其他容器已占有的高度差
        , cellMinWidth: 80
        , page: true //开启分页
        , cols: [[
            {field: 'id', fixed: 'left', width: 60, title: 'ID', sort: true}
            , {field: 'name', width: 100, title: '产品名称'}
            , {field: 'typeName', width: 100, title: '产品类别'}
            , {
                field: 'imgHref', width: 120, title: '图片展示', templet: function (d) {
                    return "<img src='" + d.imgHref + "' style='width: 80px;height: 50px;'/>";
                }
            }
            , {field: 'normalPrice', width: 100, title: '价格'}
            , {
                field: 'isShow', width: 120, title: '是否展示', templet: function (d) {
                    return d.isShow === 1 ? '展示' : '隐藏'
                }
            }
            , {
                field: 'isRecommend', width: 120, title: '是否推荐', templet: function (d) {
                    return d.isRecommend === 1 ? '推荐' : '不推荐'
                }
            }
            , {
                field: 'enable', width: 120, title: '启用停用', templet: function (d) {
                    return d.enable === 1 ? '启用' : '停用'
                }
            }
            , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
        ]]
    })

    //触发单元格工具事件
    table.on('tool(table)', function (obj) { // 双击 toolDouble
        let data = obj.data;
        //console.log(data);
        if (obj.event === 'del') {
            layer.confirm('真的删除行么', function (index) {
                let res = myAjax('/back/product/delete', data, "post");
                if (res != null) {
                    if (res.count === 1) {
                        layer.alert("删除成功");
                        obj.del();
                        layer.close(index);
                    } else {
                        layer.alert("删除失败")
                    }
                }
            });
        } else if (obj.event === 'edit') {
            sessionStorage.setItem("productId", data.id);
            xadmin.open('产品编辑', '../product/product-edit.html', 800, 600)
        }
    });

    getTypeData();

    function getTypeData() {
        let res = myAjax('/back/product/type/all', {isShow: 1, enable: 1}, "get");
        if (res != null) {
            // console.log(res);
            setTypeData(res.data);
        }
    }

    function setTypeData(data) {
        let str = "<option value='-1'>请选择产品类型</option>";
        for (let i = 0; i < data.length; i++) {
            str += ' <option value="' + data[i].id + '">' + data[i].name + '</option>';
        }
        $("#typeId").html(str);
        form.render();
    }

    form.on('submit(sreach)', function (res) {
        let data = res.field;
        data.loginName = sessionStorage.getItem("username");
        table.render({
            elem: '#table'
            , url: url + '/back/product/all' // 此处为静态模拟数据，实际使用时需换成真实接口
            , where: data
            , height: 'full-200' // 最大高度减去其他容器已占有的高度差
            , cellMinWidth: 80
            , page: true //开启分页
            , cols: [[
                {field: 'id', fixed: 'left', width: 60, title: 'ID', sort: true}
                , {field: 'name', width: 100, title: '产品名称'}
                , {field: 'typeName', width: 100, title: '产品类别'}
                , {
                    field: 'imgHref', width: 120, title: '图片展示', templet: function (d) {
                        return "<img src='" + d.imgHref + "' style='width: 80px;height: 50px;'/>";
                    }
                }
                , {field: 'normalPrice', width: 100, title: '价格'}
                , {
                    field: 'isShow', width: 120, title: '是否展示', templet: function (d) {
                        return d.isShow === 1 ? '展示' : '隐藏'
                    }
                }
                , {
                    field: 'isRecommend', width: 120, title: '是否推荐', templet: function (d) {
                        return d.isRecommend === 1 ? '推荐' : '不推荐'
                    }
                }
                , {
                    field: 'enable', width: 120, title: '启用停用', templet: function (d) {
                        return d.enable === 1 ? '启用' : '停用'
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
        })
        return false;
    })
});